<script setup lang="ts">
import { defineEmits } from 'vue';
import { IOptionItem } from 'xcore/cmpnt'; // 确保 IOptionItem 的定义是正确的
import _ from 'lodash';

const emit = defineEmits(['change']);

const onclick = (xvalue: string | string[]) => { // 根据实际情况调整类型
    emit('change', xvalue);
};
</script>

<template>
    <div class="te-theme-select d-inline-block">
        <el-select v-bind="$attrs" v-model="$attrs['modelValue']" @change="onclick" :style="$attrs['style']"
            :class="$attrs['class']">
            <el-option v-for="item in ($attrs['options'] as IOptionItem[])" :key="item.value" :label="item.label"
                :value="item.value">
                <div class="d-flex align-items-center justify-content-between">
                    <el-tag v-for="color in (item.value as string[])" :key="color" :color="color" class="mt-2 me-1"
                        size="small"></el-tag>
                    <span class="float-end" v-if="item.label">{{ item.label }}</span>
                </div>
            </el-option>
            <template #label>
                <el-tag class="me-1" v-for="color in _.split(($attrs['modelValue'] as string), ',')" :key="color"
                    :color="color" />
            </template>
        </el-select>
    </div>
</template>

<style scoped>
.te-theme-select {
    overflow: hidden;
}

.el-tag {
    border: none;
    aspect-ratio: attr(aspect-ratio) 1 / 1;
    /* 更正了 aspect-ratio 的使用 */
}
</style>